<script lang="ts" setup>
import { ref } from 'vue';
import {
  QuestionFilled,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

const sw = ref(false);
localisenabletools.getValue().then((initialvalue: boolean) => {
  sw.value = initialvalue;
});

const sw1 = ref(false);
localisenabletool1.getValue().then((initialvalue: boolean) => {
  sw1.value = initialvalue;
});

const sw2 = ref(false);
localisenabletool2.getValue().then((initialvalue: boolean) => {
  sw2.value = initialvalue;
});

const sw3 = ref(false);
localisenabletool3.getValue().then((initialvalue: boolean) => {
  sw3.value = initialvalue;
});
const onswitch = async () => {
  void localisenabletools.setValue(sw.value);
  void localisenabletool1.setValue(sw1.value);
  void localisenabletool2.setValue(sw2.value);
  void localisenabletool3.setValue(sw3.value);
};
const opentab1 =() => {
  browser.tabs.create({
    url: '/help.html#工器具领用检查',
    active: true,
  });
};
const opentab2 =() => {
  browser.tabs.create({
    url: '/help.html#工作票人员资质查询',
    active: true,
  });
};
</script>

<template>
  <div class="common-layout">
    <el-container class="layout-container" style="width: 250px;">
      <el-header >
        <el-text class="mx-1" type="primary" size="large">电网管理平台助手</el-text>
        <el-switch v-model="sw" @change="onswitch" />
      </el-header>
      <el-main>
        <div class="list-item">
          <el-switch v-model="sw1"@change="onswitch"/>
          <el-link type="info" href="http://10.10.21.28/gmp/static/gmpweb/workbench/menu/AppNavExpand.html?appCode=instrument" target="_blank" :underline="false">工器具领用检查</el-link>
          <el-button class="info-but" :icon="QuestionFilled" size="small" circle  @click="opentab1"/>
        </div>
        <div class="list-item">
          <el-switch v-model="sw2"@change="onswitch"/>
          <el-link type="info" href="http://10.10.21.28/gmp/static/gmpweb/workbench/menu/AppNavExpand.html?appCode=workTicket" target="_blank" :underline="false">工作票人员资质查询</el-link>
          <el-button class="info-but" :icon="QuestionFilled" size="small" circle @click="opentab2"/>
        </div>
        <div class="list-item">
          <el-switch v-model="sw3"@change="onswitch"/>
          <el-link type="info" href="http://10.10.21.28/gmp/static/sp/operationmanage/operationticket/mainticket/mainTicketEdit.html" target="_blank" :underline="false">生成操作票</el-link>
          <el-button class="info-but" :icon="QuestionFilled" size="small" circle @click="opentab2"/>
        </div>
      </el-main>
      <el-footer>
        <el-text class="mx-1" size="small">v0.0.1</el-text>
      </el-footer>
    </el-container>
  </div>
</template>


<style scoped>
.info-but{
  margin-left: auto;
}
.el-link{
  margin-left: 10px;
}
.common-layout {
	height: 100%;
	width:fit-content;
}
.el-header{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #d1d1d3;
    align-items: center;
    height: 40px;

}
.list-item{
  display: flex;
  align-items: center;
}
.el-main{
    border-bottom: 1px solid #d1d1d3;
}
.el-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
}
</style>